<!-- 添加定时设置 -->
<template>
    <div>
        <div class="form">
            <el-form ref="form" :model="form" label-width="200px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请填写定时设置名称"></el-input>
                </el-form-item>
                <el-form-item label="选择设备" prop="device">
                    <el-select v-model="form.device" placeholder="请选择" style="width: 100%">
                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in eleType" v-bind:key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择功能" prop="func">
                    <el-select v-model="form.func" placeholder="请选择" multiple style="width: 100%">
                        <el-option
                            :label="item.label"
                            :value="item.value"
                            v-for="(item, index) in elecTypeFunc"
                            v-bind:key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="超时自动重抄次数（0-2）" prop="num">
                    <el-input-number v-model="form.num" :min="0" :max="2" label="请选择" style="width: 220px"></el-input-number>
                </el-form-item>
                <el-form-item label="定时设置表达式" prop="bds">
                    <el-input v-model="form.bds" disabled style="width: 220px"></el-input>
                    <label class="set" @click="dialogShow = true">设置定时时间</label>
                </el-form-item>
                <el-form-item label="设置描述" prop="desc">
                    <el-input type="textarea" v-model="form.desc" style="width: 100%"></el-input>
                </el-form-item>
                <el-form-item label="下次执行时间" prop="time">
                    <el-date-picker v-model="form.time" type="datetime" placeholder="选择" style="width: 100%"> </el-date-picker>
                </el-form-item>
                <el-form-item label="应用到所有设置" prop="yy">
                    <el-radio v-model="form.yy" label="1" style="line-height: 36px; margin-right: 10px">是</el-radio>
                    <el-radio v-model="form.yy" label="2" style="line-height: 36px">否</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">添加</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div v-if="dialogShow" style="text-align: left">
            <custom-dialog title="设置定时计划" size="small" @dialogClose="dialogShow = false">
                <timeSelect @close="getTime"></timeSelect>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility'
import timeSelect from './timeSelect'
export default {
    components: {customDialog, timeSelect},
    props: ['data'],
    computed: {
        itemData() {
            return this.data
        }
    },
    watch: {
        itemData(newVal) {
            this.item = newVal
            this.form.name = newVal?.name
        }
    },
    data() {
        return {
            item: {},
            dialogShow: false,
            eleType: Utility.getDictList('elecType'),
            elecTypeFunc: Utility.getDictList('elecTypeFunc'),
            rules: {
                name: [{required: true, message: '请填写定时设置名称', trigger: ['blur', 'change']}],
                device: [{required: true, message: '请选择设备', trigger: ['blur', 'change']}],
                func: [{required: true, message: '请选择功能', trigger: ['blur', 'change']}],
                num: [{required: true, message: '请填写超时自动重抄次数', trigger: ['blur', 'change']}],
                bds: [{required: true, message: '请设置定时时间', trigger: ['blur', 'change']}],
                desc: [{required: true, message: '请填写设置描述', trigger: ['blur', 'change']}]
                // device: [
                //     {required: true, message: "请输入密码", trigger: "blur"},
                //     // {max: 16, message: "不能大于16个字符", trigger: "blur"}
                // ]
            },
            form: {
                name: '',
                device: '',
                func: '',
                num: 0,
                bds: '',
                desc: '',
                time: '',
                yy: '2'
            }
        }
    },
    methods: {
        getTime(e) {
            this.form.bds = e
            this.dialogShow = false
            console.log(e)
        },
        submitForm(formName) {
            // let that = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    PopupCommon.notify('info', '添加完成')
                } else {
                    PopupCommon.notify('info', '请完善表单内容')
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    },
    mounted() {}
}
</script>

<style scoped lang="scss">
.form {
    margin: 10px;
    background-color: #fff;
    padding: 10px;
}
.set {
    color: #409eff;
    margin-left: 10px;
    cursor: pointer;
}
</style>
